import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import { Edit, Trash } from 'lucide-react'

const FoodCards = () => {
  //   const foodsQuery = []

  //   const deleteFoodMutation = []

  //   const totalPages = foodsQuery.data?.totalPages

  return (
    <div className='space-y-6'>
      <div className='grid grid-cols-1 gap-2 lg:grid-cols-2 xl:grid-cols-4'>
        <div className='flex flex-col gap-3 rounded-lg border p-6'>
          <div className='flex justify-between'>
            <p className='truncate'>name</p>
            <div className='flex gap-1'>
              <Button className='size-6' variant='ghost' size='icon'>
                <Edit />
              </Button>
              <Button className='size-6' variant='ghost' size='icon'>
                <Trash />
              </Button>
            </div>
          </div>
          <Separator />
          <div className='grid grid-cols-2 gap-5'>
            <div>
              <p className='text-foreground/60 text-sm font-normal'>Calories</p>
              <p className='text-sm font-medium'>calories kcal</p>
            </div>
            <div>
              <p className='text-foreground/60 text-sm font-normal'>Carbohydrates</p>
              <p className='text-sm font-medium'>carbohydrates g</p>
            </div>
            <div>
              <p className='text-foreground/60 text-sm font-normal'>Protein</p>
              <p className='text-sm font-medium'>protein g</p>
            </div>
            <div>
              <p className='text-foreground/60 text-sm font-normal'>Fat</p>
              <p className='text-sm font-medium'>fat g</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

export { FoodCards }
